<script setup>
import { defineProps, ref, onMounted } from 'vue'

const props = defineProps({
  type: {
    type: Number,
    default: 0
  }
})
console.log('props.type', props.type)
const app = ref(props.type)
// 存储随机位置和尺寸的对象数组
const randomItems = ref([])

const colorGroups = [
  // 红色系
  { primary: '#FFCCCC', secondary: '#FF9999' },
  { primary: '#FF9999', secondary: '#FF6666' },
  { primary: '#FF6666', secondary: '#FF3333' },
  
  // 蓝色系
  { primary: '#CCCCFF', secondary: '#9999FF' },
  { primary: '#99CCFF', secondary: '#66CCFF' },
  { primary: '#66CCFF', secondary: '#33CCFF' },
  
  // 绿色系
  { primary: '#CCFFCC', secondary: '#99FF99' },
  { primary: '#99FF99', secondary: '#66FF66' },
  { primary: '#66FFCC', secondary: '#33FFCC' },
  
  // 黄色系
  { primary: '#FFFFCC', secondary: '#FFFF99' },
  { primary: '#FFFF99', secondary: '#FFFF66' },
  { primary: '#FFEECC', secondary: '#FFDD99' },
  
  // 紫色系
  { primary: '#E6CCFF', secondary: '#CC99FF' },
  { primary: '#CC99FF', secondary: '#9966FF' },
  { primary: '#FFCCFF', secondary: '#FF99FF' },
  
  // 灰色系
  { primary: '#EEEEEE', secondary: '#DDDDDD' },
  { primary: '#DDDDDD', secondary: '#CCCCCC' },
  { primary: '#CCCCCC', secondary: '#BBBBBB' },
  
  // 粉色系
  { primary: '#FFCCE6', secondary: '#FF99CC' },
  { primary: '#FF99CC', secondary: '#FF66B3' },
  { primary: '#FFCCDD', secondary: '#FF99BB' },
  
  // 橙色系
  { primary: '#FFE5CC', secondary: '#FFCC99' },
  { primary: '#FFCC99', secondary: '#FFB366' },
  { primary: '#FFD9CC', secondary: '#FFB399' }
]
const text = [
  'Happy Birthday!',
  'Merry Christmas!',
  'Happy New Year!',
  'Happy Valentine\'s Day!',
  'Happy Independence Day!',
]
// 生成随机宽高和位置的函数
const generateRandomDimensions = () => {
  const items = []
  const itemCount = 52 // 生成100个元素
  
  for (let i = 0; i < itemCount; i++) {
    // 获取屏幕尺寸
    const screenWidth = window.innerWidth
    const screenHeight = window.innerHeight
    
    // 生成随机位置（确保元素完全在屏幕内）
    const left = Math.floor(Math.random() * (screenWidth)) - (screenWidth / 2) - 50
    const top = Math.floor(Math.random() * (screenHeight)) - (screenHeight / 2)
    
    const randomColorGroup = colorGroups[Math.floor(Math.random() * colorGroups.length)]
    const randomText = text[Math.floor(Math.random() * text.length)]
    items.push({
      id: i,
      left: `${left}px`,
      top: `${top}px`,
      show: false, 
      color: randomColorGroup,
      text: randomText
    })
  }
  
  randomItems.value = items
}

generateRandomDimensions()

// 组件挂载后生成随机元素
onMounted(() => {
  // 逐个显示元素
  randomItems.value.forEach((item, index) => {
    setTimeout(() => {
      item.show = true
    }, index * 100) // 每100ms显示一个元素
    if(index === 51) {
      setTimeout(() => {
        randomItems.value.forEach((item, index) => {
          setTimeout(() => {
            item.show = false
          }, index * 100)
          if(index === 51) {
            setTimeout(() => {
              app.value = 2
            }, 5200)
          }
        })
      }, 7200)
    }
  })
})
</script>

<template>
  <div>
    <div v-if="app == 1">
      <div 
        class="box" 
        v-for="(item, index) in randomItems" 
        :key="index"
        :style="{
          left: item.left,
          top: item.top
        }"
        :class="{ 'show': item.show }"
      >
        <div class="title" :style="{backgroundColor:item.color.secondary}">
          <svg t="1762760509006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16870" width="30" height="30"><path d="M604.896264 36.076959c29.450579-21.487074 75.623669-31.870942 110.693554-13.532033 27.072529 16.688661 57.293223 41.38314 61.270744 74.802776 7.955041 45.360661-3.977521 92.515438-27.072529 129.819505 18.338909 62.032397 50.979967 117.929256 46.181554 188.805289-7.134149 92.303868-61.270744 188.644496-152.796033 219.694545-35.950017 9.503736-70.199008 23.814347-107.545389 28.672-2.369587 3.249719-6.406347 6.347107-7.176463 9.60529 0 105.793587 0 220.523901-8.005818 327.197619-7.904264 15.910083-27.013289 23.915901-42.144793 15.131505-7.193388-3.249719-11.932562-10.324628-15.190744-17.560331-5.526215-104.244893-4.705322-216.647934-7.904264-324.768793-31.100826-20.818512-74.845091-19.168264-108.264728-38.27729-93.962579-35.89924-143.343074-133.069223-145.721124-229.308297 4.756099-64.57124 24.643702-122.685355 50.159075-179.2-14.259835-43.651174-45.402975-89.875041-23.095008-139.314777 19.066711-50.269091 70.876033-78.111736 121.805223-78.881851 23.086545 1.599471 41.374678 11.153983 61.313058 19.159801C451.998678 17.018711 495.032066-10.155372 539.554909 11.340165c23.145785 4.857653 37.447934 36.728595 65.341355 24.745256" fill="#231916" p-id="16871"></path><path d="M545.174215 89.451901c11.111669 22.31643 0 68.497983 38.277289 62.971768 24.584463-25.625388 21.436298-76.503802 66.839273-79.711206 21.495537-4.747636 44.582083-3.249719 59.66281 12.812694 18.389686 19.066711 19.93838 50.057521 12.761917 74.752-8.682843 30.271471-45.301421 54.187372-34.198215 87.657785 38.996628 59.66281 69.217322 129.658711 47.781025 206.170975-9.562975 70.918347-81.251438 124.284826-144.891769 141.743604-97.212298 23.095008-210.283901 14.302149-285.078214-51.758546-44.582083-47.840264-57.335537-113.799405-47.831802-179.098446 4.747636-56.616198 54.238149-96.442182 51.809322-152.956827-21.537851-33.470413-51.809322-74.743537-28.722777-114.730314 18.338909-20.666182 39.87676-32.598744 68.548761-27.013289 19.887603 5.627769 42.144793 19.159802 47.679471 39.72443 4.84919 19.210579 5.627769 40.756893 25.557686 51.758545 50.937653-3.82519 4.705322-64.469686 38.175735-87.454677 23.915901-15.139967 69.327339-15.96086 83.629488 15.131504" fill="#EE90B2" p-id="16872"></path><path d="M369.232397 754.341025c48.55114 62.142413 39.817521 162.359008 7.955041 229.198281-47.789488 30.271471-113.080066 11.213223-156.824331-13.481256-76.453025-55.685289-131.461289-141.752066-112.301487-240.462281 6.35557-22.984992 17.568793-50.937653 43.803504-58.892695 83.629488-21.487074 170.356364 6.35557 217.35881 83.637951M910.615273 735.164298c18.338909 91.482975-20.666182 178.379107-99.488794 231.737123-50.979967 36.627041-122.626116 58.943471-185.538644 31.820166-41.425455-23.814347-39.825983-78.822612-38.167273-124.132496-0.829355-71.696926 61.253818-133.797025 120.188826-164.060033 56.514645-21.597091 128.981686-25.523835 185.445554-1.607934 9.656066 7.193388 13.633587 16.739438 17.560331 26.251636" fill="#231916" p-id="16873"></path><path d="M334.958017 798.127603c18.279669 40.655339 23.035769 93.141686 4.028297 133.797025-15.139967 25.413818-48.61038 8.67438-70.918347 7.955041-58.892694-19.168264-97.889322-78.111736-109.102546-135.404958-3.918281-26.234711-1.548694-54.957488 9.613753-76.444562 63.741884-19.887603 132.950744 10.383868 166.378843 70.097454M853.305124 758.369322c19.117488 44.480529 0 92.312331-25.464595 128.05924-45.402975 48.61038-105.108099 81.310678-172.006612 61.423074-25.464595-30.381488-7.904264-78.873388 0-113.181619 23.095008-46.951669 70.86757-89.113388 124.284827-89.934281 27.013289-0.770116 52.528661 0.829355 73.18638 13.642049" fill="#15AB4A" p-id="16874"></path></svg>
          <span class="hint">提示</span>
        </div>  
        <div class="main" :style="{backgroundColor:item.color.primary}">{{item.text}}</div>  
      </div>
    </div>
    <div v-if="app == 2">
      <div>appp</div>
    </div>
  </div>
</template>

<style scoped>
.box{
  position: absolute;
  background-color: red;
  border-radius: 10px;
  width: 160px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.box.show {
  opacity: 1;
  transform: scale(1);
}
.icon {
  vertical-align: middle;
}
.title {
  border-bottom: 2px solid #ccc;
  border-radius: 10px 10px 0 0; /* 添加这行 */
}
.hint {
  vertical-align: middle;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-left: 8px;
}
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  min-height: 40px;
  border-radius: 0 0 10px 10px; /* 添加这行 */
}
</style>